<template>
  <div class="counselor-page-root">
    <router-link class="back-btn" to="/counselor">← 返回辅导员端导航</router-link>
    <div class="main-card">
      <h2>问卷模板管理</h2>
      <div class="btn-group">
        <button class="btn main">新建模板</button>
        <button class="btn secondary">批量导入</button>
      </div>
      <div class="table-wrap">
        <table>
          <thead>
            <tr>
              <th>模板ID</th>
              <th>模板名称</th>
              <th>创建时间</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="tpl in filteredTemplates" :key="tpl.id">
              <td>{{ tpl.id }}</td>
              <td>{{ tpl.name }}</td>
              <td>{{ tpl.date }}</td>
              <td>{{ tpl.status }}</td>
              <td>
                <button class="btn mini edit" @click="onEdit(tpl)">编辑</button>
                <button class="btn mini preview" @click="onPreview(tpl)">预览</button>
                <button class="btn mini delete" @click="onDelete(tpl)">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="pagination">
        <button class="btn mini">上一页</button>
        <button class="btn mini active">1</button>
        <button class="btn mini">2</button>
        <button class="btn mini">下一页</button>
      </div>
    </div>
  </div>
  <template v-if="showEdit">
    <div class="modal-mask">
      <div class="modal-box">
        <h4>编辑模板</h4>
        <div class="form-group">
          <label>模板名称</label>
          <input v-model="editForm.name" />
        </div>
        <div class="form-group">
          <label>创建时间</label>
          <input v-model="editForm.date" type="date" />
        </div>
        <div class="form-group">
          <label>状态</label>
          <select v-model="editForm.status">
            <option>已发布</option>
            <option>草稿</option>
          </select>
        </div>
        <div style="text-align:right; margin-top:18px;">
          <button class="btn mini" @click="showEdit=false">取消</button>
          <button class="btn mini main" @click="saveEdit">保存</button>
        </div>
      </div>
    </div>
  </template>
  <template v-if="showPreview">
    <div class="modal-mask">
      <div class="modal-box">
        <h4>模板预览</h4>
        <div class="detail-row"><b>模板ID：</b>{{ currentTpl.id }}</div>
        <div class="detail-row"><b>模板名称：</b>{{ currentTpl.name }}</div>
        <div class="detail-row"><b>创建时间：</b>{{ currentTpl.date }}</div>
        <div class="detail-row"><b>状态：</b>{{ currentTpl.status }}</div>
        <div style="text-align:right; margin-top:18px;">
          <button class="btn mini" @click="showPreview=false">关闭</button>
        </div>
      </div>
    </div>
  </template>
  <template v-if="showDelete">
    <div class="modal-mask">
      <div class="modal-box">
        <h4>确认删除</h4>
        <div class="detail-row">确定要删除 "{{ currentTpl.name }}" 吗？</div>
        <div style="text-align:right; margin-top:18px;">
          <button class="btn mini" @click="showDelete=false">取消</button>
          <button class="btn mini delete" @click="doDelete">删除</button>
        </div>
      </div>
    </div>
  </template>
</template>
<script>
export default {
  name: 'CounselorSurveyTemplate',
  data() {
    return {
      search: '',
      templates: [
        { id: 'T001', name: '校园满意度调查', date: '2025-06-01', status: '已发布' },
        { id: 'T002', name: '安全知识问卷', date: '2025-06-10', status: '已发布' },
        { id: 'T003', name: '学生健康状况调查', date: '2025-06-20', status: '草稿' }
      ],
      showEdit: false,
      showPreview: false,
      showDelete: false,
      currentTpl: null,
      editForm: { id: '', name: '', date: '', status: '' }
    }
  },
  computed: {
    filteredTemplates() {
      if (!this.search) return this.templates;
      return this.templates.filter(t => t.name.includes(this.search));
    }
  },
  methods: {
    onEdit(tpl) {
      this.editForm = { ...tpl };
      this.showEdit = true;
    },
    saveEdit() {
      const idx = this.templates.findIndex(t => t.id === this.editForm.id);
      if (idx !== -1) this.templates.splice(idx, 1, { ...this.editForm });
      this.showEdit = false;
    },
    onPreview(tpl) {
      this.currentTpl = tpl;
      this.showPreview = true;
    },
    onDelete(tpl) {
      this.currentTpl = tpl;
      this.showDelete = true;
    },
    doDelete() {
      this.templates = this.templates.filter(t => t.id !== this.currentTpl.id);
      this.showDelete = false;
    }
  }
}
</script>
<style scoped>
.counselor-page-root { min-height: 100vh; background: #f6f8fa; padding: 32px 0 60px 0; }
.main-card { max-width: 800px; margin: 36px auto; background: #fff; border-radius: 16px; box-shadow: 0 4px 24px rgba(102,126,234,0.10); padding: 36px 32px 28px 32px; }
h2 { text-align: center; margin-bottom: 28px; color: #4a4a4a; }
.btn-group { display: flex; gap: 18px; margin-bottom: 24px; justify-content: center; }
.btn { padding: 10px 28px; border: none; border-radius: 22px; font-size: 15px; font-weight: 500; cursor: pointer; transition: background 0.2s, box-shadow 0.2s; }
.btn.main { background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); color: #fff; box-shadow: 0 2px 8px rgba(102,126,234,0.10); }
.btn.main:hover { background: linear-gradient(90deg, #5a67d8 0%, #6b46c1 100%); }
.btn.secondary { background: #f0f1f5; color: #666; }
.btn.secondary:hover { background: #e0e7ef; }
.btn.mini { background: #007bff; color: #fff; padding: 6px 18px; font-size: 14px; margin-right: 6px; border-radius: 16px; }
.btn.mini.edit { background: #007bff; }
.btn.mini.preview { background: #28a745; }
.btn.mini.delete { background: #dc3545; }
.btn.mini.active { background: #764ba2; }
.btn.mini:hover { opacity: 0.85; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; margin-top: 15px; }
th, td { padding: 10px; border: 1px solid #ddd; text-align: left; }
th { background-color: #f5f5f5; }
.pagination { margin-top: 18px; text-align: center; }
.back-btn { display: inline-block; margin: 24px 0 18px 0; padding: 8px 22px; background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); color: #fff; border-radius: 22px; font-size: 15px; font-weight: 500; text-decoration: none; box-shadow: 0 2px 8px rgba(102,126,234,0.10); transition: background 0.2s, box-shadow 0.2s; }
.back-btn:hover { background: linear-gradient(90deg, #5a67d8 0%, #6b46c1 100%); box-shadow: 0 6px 18px rgba(102,126,234,0.18); }
</style> 